<template>
	<view class="temp">
		<u-navbar title="现金收益" bgColor='#FFEBDE' :autoBack='true' :placeholder="true">
		</u-navbar>
		<view class="topPrice">
			<view class="priceCon">
				<text>余额(￥)</text>
				<text class="number">1225.50</text>
			</view>
			<view class="topBtn">
				<view class="btn1" @tap.stop="goto('pages/owns/wallet/topUp')">
					<text>充值</text>
				</view>
				<view class="btn1 btn2" @tap.stop="goto('pages/owns/wallet/withdraw')">
					<text>提现</text>
				</view>
			</view>
			<image src="/static/images/sybck.png" mode="" class="bckImage"></image>
		</view>
		<view class="codeCon">
			<image src="/static/images/wechat.png" mode=""></image>
			<text>收款码</text>
		</view>
		<u-gap height="8" bgColor="#F5F5F5"></u-gap>
		<view class="listCon">
			<view class="item" v-for="(item,index) in menuList" :key="index" @tap="goto(item.url)">
				<text>{{item.lable}}</text>
				<view class="iconfont icon-youjiantouright">
				</view>
			</view>
		</view>
		<u-gap height="2" bgColor="#F5F5F5"></u-gap>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuList: [{
						lable: "收入记录",
						url: "",
					},
					{
						lable: "打赏记录",
						url: "",
					},
					{
						lable: "充值记录",
						url: "",
					},
					{
						lable: "提现记录",
						url: "pages/owns/wallet/withdrawHistory",
					},
					{
						lable: "支付设置",
						url: "",
					}
				]
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	/* #ifdef H5 */
	page {
		position: relative;
		height: 100%;
		background-color: $page-color-base2;
	}

	/* #endif */

	.temp {
		position: relative;
		height: 100%;
		background: $page-color-base2;

		.topPrice {
			position: relative;
			padding: 0 0 26rpx 0;
			height: 240rpx;
			background-color: #FFEBDE;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			flex-direction: column;

			image {
				left: auto;
				right: 0;
				top: 50rpx;
				width: 240rpx;
				height: 230rpx;
				z-index: 1;
			}

			.priceCon {
				text-align: center;
				display: flex;
				flex-direction: column;
				font-size: 24rpx;
				font-weight: 500;
				margin-bottom: 32rpx;

				.number {
					font-size: 72rpx;
					font-weight: 700;
					line-height: 72rpx;
					color: rgba(255, 140, 64, 1);
					margin-top: 10rpx;
				}
			}

			.topBtn {
				position: relative;
				z-index: 99;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0 100rpx;

				.btn1 {
					width: 240rpx;
					height: 80rpx;
					opacity: 1;
					border-radius: 40rpx;
					background: rgba(255, 255, 255, 1);
					display: flex;
					justify-content: center;
					align-items: center;
					/** 文本1 */
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(255, 140, 64, 1);
				}

				.btn2 {
					margin-left: 70rpx;
				}
			}
		}

		.codeCon {
			position: relative;
			z-index: 99;
			padding: 56rpx 156rpx;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			background: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 440rpx;
				height: 440rpx;
			}

			text {
				font-size: 28rpx;
				font-weight: 400;
				line-height: 40.54rpx;
				color: rgba(51, 51, 51, 1);
				margin-top: 20rpx;
			}
		}

		.listCon {
			position: relative;
			display: flex;
			flex-direction: column;

			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 96rpx;
				background: rgba(255, 255, 255, 1);
				border-bottom: 1rpx solid rgba(245, 245, 245, 1);
				padding: 0rpx 24rpx;
			}
		}
	}
</style>